<!-- 审批详情 -->
<template>
	<view class="approval-detail" :style="{height: winHeight +'px' }">
		<view class="approval-info" :style="{height: winHeight/2 +'px' }">
			<view class="approval-title font32">基本信息</view>
			<view class="approval-cont">
				<view class="approval-cont-item uni-flex uni-flex-center">
					<view class="title font26 color666">项目编号：</view>
					<view class="date font24 color333">202010001</view>
				</view>
				<view class="approval-cont-item uni-flex uni-flex-center">
					<view class="title font26 color666">项目名称：</view>
					<view class="date font24 color333">北京同仁堂项目立项信息</view>
				</view>
				<view class="approval-cont-item uni-flex uni-flex-center">
					<view class="title font26 color666">项目类型：</view>
					<view class="date font24 color333">房建</view>
				</view>
				<view class="approval-cont-item uni-flex uni-flex-center">
					<view class="title font26 color666">所在区域：</view>
					<view class="date font24 color333">中国华北地区北京北京市东城区</view>
				</view>
				<view class="approval-cont-item uni-flex uni-flex-center">
					<view class="title font26 color666">项目地址：</view>
					<view class="date font24 color333">北京市东城区王府井大街666号</view>
				</view>
				<view class="approval-cont-item uni-flex uni-flex-center">
					<view class="title font26 color666">项目状态：</view>
					<view class="date font24 color333">项目立项666号</view>
				</view>
				<view class="approval-cont-item uni-flex uni-flex-center">
					<view class="title font26 color666">计划开始时间：</view>
					<view class="date font24 color333">2020-10-01</view>
				</view>
				<view class="approval-cont-item uni-flex uni-flex-center">
					<view class="title font26 color666">工程工期：</view>
					<view class="date font24 color333">266天</view>
				</view>
			</view>
		</view>
		<!-- 流程审批 -->
		<view class="approval-list" :style="{height: winHeight/2 +'px' }">
			<view class="approval-title uni-flex uni-flex-center uni-flex-space-between">
				<view class="font32">流程审批</view>
				<view class="history-approval font24" @tap="showApprovaledPopup">历史审批</view>
			</view>
			<view class="approval-user-info uni-flex uni-flex-center">
				<view class="user-portrait"></view>
				<view class="current-user-info">
					<view class="uni-flex uni-flex-center uni-flex-space-between">
						<text class="font28 current-approval-user">当前审批人：范泽普</text>
						<text class="font24 color999">2020-10-24 15:23:09</text>
					</view>
					<view class="uni-flex uni-flex-center uni-flex-space-between">
						<text class="font26">任务名称：马化腾发起的项目立项</text>
						<text class="font26 colorRed">未审批</text>
					</view>
				</view>
			</view>
			<view class="approval-cont">
				<view class="filter-item uni-flex  uni-flex-center uni-flex-space-between">
					<view class="lable font28">审批类型</view>
					<view class="info">
						<picker @change="bindPickerChange" :value="index" :range="approveOption">
							<view class="text font26">{{approveOption[index]}}</view>
							<uni-icons class="arrow icon-arrow" type="jiantou9" size="13" />
						</picker>
					</view>
				</view>
				<view class="filter-item uni-flex  uni-flex-center uni-flex-space-between">
					<view class="lable font28">驳回节点</view>
					<view class="info">
						<picker @change="bindPickerChange" :value="index" :range="approveOption">
							<view class="text font26">{{approveOption[index]}}</view>
							<uni-icons class="arrow icon-arrow" type="jiantou9" size="13" />
						</picker>
					</view>
				</view>
				<view class="filter-item uni-flex  uni-flex-center uni-flex-space-between">
					<view class="lable font28">抄 送 人</view>
					<view class="info">
						<picker @change="bindPickerChange" :value="index" :range="approveOption">
							<view class="text font26">{{approveOption[index]}}</view>
							<uni-icons class="arrow icon-arrow color999" type="jiantou9" size="13" />
						</picker>
					</view>
				</view>
				<view class="filter-item uni-flex  uni-flex-center uni-flex-space-between">
					<view class="lable font28">批 注 </view>
					<view class="info">
						<input class="text font26" placeholder="请输入批注" />
					</view>
				</view>
			</view>
			<view class="uni-btn uni-flex uni-flex-flex-end">
				<button class="cancel font26" form-type="reset">取消</button>
				<button class="submit font26" type="default" form-type="submit">保存</button>
			</view>
			<!-- 流程审批记录 -->
			<view class="approvaled-list">
				<view class="approvaled-list-item uni-flex">
					<view class="left">
						<view class="user-portrait"></view>
					</view>
					<view class="rihgt">
						<view class="name uni-flex uni-flex-center">
							<uni-icons color="#999"  class="address color999" type="dingwei" size="18" />
							<view class="text uni-flex uni-flex-center uni-flex-space-between">
								<text class="font28">马化腾</text>
								<text class="font24">2020-10-24 15:23:09</text>
							</view>
						</view>
						<view class="right-content">
							<view class="text font28">
								任务名称任务名称任务名称任务名称
							</view>
							<view class="text font28">
								<text class="label">审批状态:</text>
								<text class="text status">审批通过</text>
							</view>
							<view class="text font28">
								<text class="label">审批意见:</text>
								<text class="color666">审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见</text>
							</view>
						</view>
					</view>
				</view>
				<view class="approvaled-list-item uni-flex">
					<view class="left">
						<view class="user-portrait"></view>
					</view>
					<view class="rihgt">
						<view class="name uni-flex uni-flex-center">
							<uni-icons color="#999" class="address color999" type="dingwei" size="18" />
							<view class="text uni-flex uni-flex-center uni-flex-space-between">
								<text class="font28">马化腾</text>
								<text class="font24">2020-10-24 15:23:09</text>
							</view>
						</view>
						<view class="right-content">
							<view class="text font28">
								任务名称任务名称任务名称任务名称
							</view>
							<view class="text font28">
								<text class="label">审批状态:</text>
								<text class="text status">审批通过</text>
							</view>
							<view class="text font28">
								<text class="label">审批意见:</text>
								<text class="color666">审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 历史审批 -->
		<approvaled-popup ref="approvaledPopup"/>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import approvaledPopup from './components/approvaled-popup.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			uniIcons,
			approvaledPopup
		},
		computed: {
			...mapGetters(['user', 'themeBgColor'])
		},
		data() {
			return {
				winHeight: '', // 窗口的高度
				title: 'picker',
				approveOption: ['全部', '未审批', '已审批'],
				index: 0,
			}
		},
		onLoad() {
			//  高度自适应
			uni.getSystemInfo({
				success: res => {
					this.winHeight = res.windowHeight
				}
			})
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			showApprovaledPopup() {
				this.$refs.approvaledPopup.popupOpen()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.approval-detail {
		overflow: hidden;

		.approval-info {
			padding: 20rpx 60rpx;
			background-color: #fff;
			margin-bottom: 10rpx;
			overflow-y: scroll;

			.approval-title {
				height: 60rpx;
				line-height: 60rpx;
				position: relative;
				padding-left: 20rpx;
				color: $text-color-blue;

				&::before {
					content: '';
					border-radius: 20%;
					display: inline-block;
					position: absolute;
					width: 6rpx;
					height: 30rpx;
					left: 0rpx;
					top: 15rpx;
					background-color: $bg-color-blue;
				}
			}

			.approval-cont {
				.approval-cont-item {
					height: 80rpx;
					line-height: 80rpx;
					border-bottom: 1px solid #eee;
				}
			}
		}

		.approval-list {
			padding: 20rpx 60rpx;
			background-color: #fff;
			overflow-y: scroll;

			.approval-title {
				height: 60rpx;
				line-height: 60rpx;
				position: relative;
				padding-left: 20rpx;
				color: $text-color-blue;

				&::before {
					content: '';
					border-radius: 20%;
					display: inline-block;
					position: absolute;
					width: 6rpx;
					height: 30rpx;
					left: 0rpx;
					top: 15rpx;
					background-color: $bg-color-blue;
				}

				.history-approval {
					padding: 8rpx 20rpx;
					border-radius: 10rpx;
					background-color: $bg-color-blue;
					color: #fff;
				}
			}

			.approval-user-info {
				margin: 15rpx 0;

				.user-portrait {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background: #424a60 url('~static/img/portrait.png') center center;
					background-size: 100% auto;
					margin-right: 20rpx;
				}

				.current-user-info {
					width: 550rpx;

					view {
						line-height: 45rpx;
					}

					.current-approval-user {
						color: $bg-color-blue
					}
				}

			}

			.approval-cont {
				.filter-item {
					border-bottom: 1px solid #eee;

					.lable {
						line-height: 80rpx;
						height: 80rpx;
					}

					.info {
						position: relative;
						width: 78%;

						.text {
							line-height: 80rpx;
							height: 80rpx;
						}

						.arrow {
							position: absolute;
							right: 30rpx;
							top: 15rpx;
						}
					}
				}
			}

			.uni-btn {
				margin: 30rpx 0;
				width: 100%;

				button {
					width: 20%;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 10rpx;
					margin: 0 0 0 20rpx;

					&::after {
						border: none;
					}

					&.cancel {
						background-color: $bg-color-lightblue;
						color: $text-color-blue;
					}

					&.submit {
						background-color: $bg-color-blue;
						color: #fff;
					}
				}
			}

		}

		.approvaled-list {
			.approvaled-list-item {
				margin-bottom: 20rpx;

				.left {
					.user-portrait {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background: #424a60 url('~static/img/portrait.png') center center;
						background-size: 100% auto;
						margin-right: 20rpx;
					}
				}

				.rihgt {
					.name {
						.text {
							width: 90%;
						}

						.address {
							margin-right: 15rpx;
							color: #999;
						}
					}

					.right-content {
						padding: 10rpx 10rpx 10rpx 20rpx;
						border-left: 2px solid #eee;
						margin-left: 16rpx;

						.status {
							color: $bg-color-blue
						}
					}
				}
			}
		}
		.approvaled-popup{
			background-color: #fff;
			width: 90%;
			margin: 0 auto;
			padding:0rpx 40rpx 0rpx;
			border-radius: 10rpx;
			.title{
				line-height: 90rpx;
				height: 90prx;
				text-align: center;
				border-bottom:1px solid #eee;
				margin-bottom: 20rpx;
			}
			.approvaled-list{
				overflow-y: scroll;
				height: 940rpx;;
			}
		}
	}
</style>
